<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
			<div id="root"></div>
	</body>
</html>
<script src="./js/babel.min.js"></script>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>

<script type="text/babel">
	let ele = document.querySelector("#root");

	let num = 10;
	
	setInterval(function(){
		num++;
		console.log(num)
		
		let xx = <div>
			<h2>我要上天，床前明月光</h2>
			<h2 style={{color:'red'}}>{num}</h2>
			<h2>年少不知富婆好，错把少女当成宝</h2>
		</div>
		
		//回忆
		ReactDOM.render(xx,ele);		//每隔一秒重新调用render渲染
										//因为元素一旦被声明，就不可改变
		
	},1000)
	
	let xx = <div>
		<h2>我要上天，床前明月光</h2>
		<h2 style={{color:'red'}}>{num}</h2>
		<h2>年少不知富婆好，错把少女当成宝</h2>
	</div>
	
	ReactDOM.render(xx,ele);
	
	
	
</script>
